<template>
	<view>
		<view style="height: 20px;"></view>
		<!-- 文章分类 -->
		<view class="v-flex1">
			<view v-for="(item,i) in categorysList" :key="i" class="v-withd"> 
				<navigator class="v-brode" :url="'/homepky/CategoryArticle/CategoryArticle?id='+encodeURIComponent(JSON.stringify(item.id))" >
				<view>{{item.categoryName}}</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
import CategoryArticleVue from '../CategoryArticle/CategoryArticle.vue';
	export default {
		data() {
			return {
				categorysList:[]
			};
		},
		onLoad() {
			this.getcategorys()
		},
		methods:{
			async getcategorys(){
				const { data : res} =await uni.$http.get('/categorys')
				if(res.code!==200) return uni.$showMsg()
				this.categorysList=res.data
				console.log(res);
				// .then((res) => {  
				//     // 处理成功响应  
				//     console.log(res); // 打印返回的数据   
				// }) 
			}
		}
	}
</script>

<style lang="scss">
	.v-flex1{
		display: flex;
		// 自动换行---wrap
		flex-wrap: wrap;
		margin-left: 20px;
	}
.v-withd{
	width: 170px;
	height: 80px;
}
.v-brode{
	width: 80%; /* 设置框的宽度 */
	margin: 0 auto; /* 设置框的水平位置居中 */  
	background-color: #f5f3f4; /* 设置框的背景颜色 */  
	border: 1px solid #ddd; /* 设置框的边框 */  
	padding: 20px; /* 设置框的内边距 */  
}
</style>
